<template>
  <view class="award">
    <view class="back" :style="{top: statusBarHeight + 'px'}" @click="backClick()"></view>
    <view class="title_icon">
      <image class="" src="../../../static/award/border.png" mode=""></image>
      <view class="span">
        幸运大抽奖
      </view>
    </view>
    <view class="award_box">
      <view class="award_box_top">
        您还有{{count}}次抽奖机会
      </view>
      <div class="award_content">
        <div :class="activeIndex == item.index ?'box2':'box'" v-for="(item,index) in newList" :key="index"
          @click="startBtn(item,index)">
          <!-- <img :src="item.pic" alt="" v-if="index != 4"> -->
          <image v-if="item && item.id == 'btn'" src="../../../static/award/button.png" mode=""></image>
          <image src="" mode=""></image>
          <view v-if="item && item.id == 'btn'" class="btn_text">
            抽奖
          </view>
          <view class="text">{{item.name}}</view>
        </div>
      </div>
      <view class="jilu_box">
        <view class="u-flex u-ju-around" v-for="(item,index) in jluList" :key="index">
          <view class="">
            {{item.tel}}
          </view>
          <view class="">
            {{item.message}}
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    getTurntable,
    getLuckDraw,
    getTurntableLog
  } from '@/api/index.js'
  export default {
    data() {
      return {
        jluList: [], // 中奖记录
        count: 0, // 剩余的抽奖次数
        list: [0, 2, 2, 2, 2, 2, 2, 2], // 抽奖列表
        showNums: '', // 抽中的奖项的id值
        showNumber: '', // 登录后返回抽中的奖品ID
        isShow: false, // 弹框的显影
        number: null, // 控制抽到的奖项的索引
        activeIndex: null,
        statusBarHeight: 0,
        isBtn: true, // 开始抽奖
        mapList: new Map(),
        forbidBtn: false,
        array: [1, 2, 3, 4, 5, 6, 7],
        dynamicList: [],
        mobileloginshow: false,
        nums: '',
        name: '',
        showImg: false,
        showNumsTwo: ''
      }
    },
    computed: {
      // 改变数组的下标组成新的数组
      newList() {
        // ary 新的数组改变数组下标
        const ary = this.list.map((item, index) => {
          switch (index) {
            // 当下标为3的时候把list[7] = 下标3 的数据,然后下标等于7
            case 3:
              return {
                ...this.list[7],
                  index: 7
              };
            case 4:
              return {
                ...this.list[3],
                  index: 3
              };
            case 5:
              return {
                ...this.list[6],
                  index: 6
              };
            case 6:
              return {
                ...this.list[5],
                  index: 5
              };
            case 7:
              return {
                ...this.list[4],
                  index: 4
              };
            default:
              return {
                ...item,
                index: index
              };
          }
        })

        // 数组前四项加一项
        return ary.slice(0, 4).concat({
          id: 'btn',
          name: '开始抽奖',
          // 连接后四项
        }).concat(ary.slice(4));
      }
    },
    methods: {
      backClick() {
        uni.navigateBack()
      },
      /**
       * 点击开始抽奖
       */
      startBtn(item, index) {
        // 禁用开始抽奖按钮
        if (this.isBtn) {
          // 如果id不是btn就不执行
          if (item.id == 'btn') {
            this.isBtn = false; // 禁用开始抽奖按钮
            // 初始化
            this.activeIndex = null;
            this.number = null;
            getLuckDraw().then(res => {
              if (res.code == 1) {
                setTimeout(() => {
                  this.number = Number(res.data.id) - 1
                  this.name = res.data.msg
                }, 1000)
              }
            })
            this.move(20); // 转盘动起来
            this.count-- // 每一次count减一
          }
        } else {
          this.$ui.toast('转盘正在运行中')
        }
      },
      // 登陆成功后进行的操作
      onGetUserInfo() {
        this.mobileloginshow = false;
        location.reload();
      },
      /**
       * 转盘动起来
       */
      move(time) {
        // 判断让定时器停下来
        if (time > 300) {
          console.log(111);
          // 中将的索引不中奖就不停
          if (this.activeIndex != this.number) {
            this.timer = setTimeout(() => {
              const n = this.activeIndex + 1;
              this.activeIndex = n % 8;
              this.move(time + time * 0.05);
            }, time);

          } else {
            // 抽奖结束之后执行
            setTimeout(() => {
              clearTimeout(this.timer)
              this.isBtn = true;
              this.showImg = true
              this.$ui.toast(this.name); // 打开中奖弹框
            }, 500);
            setTimeout(() => {}, 500);

          }
        } else {
          // 控制activeIndex的值使阴影动起来
          this.timer = setTimeout(() => {
            const n = this.activeIndex + 1;
            this.activeIndex = n % 8;
            this.move(time + time * 0.1);
          }, time);
        }
      },

      // 立即领取
      immediatelyBtn() {
        if (this.count == 1 || this.count == 0) {
          if (this.nums != 5 || this.nums != undefined) {
            window.location.href = this.list[this.nums].url;
          }
        }


      },
      /**
       * 请求抽奖的列表
       */
      getPrizeList() {
        getTurntable().then((res) => {
          if (res.code == 1) {
            // list赋值
            this.list = res.data;
            this.count = res.draw_num;
          }
        }).catch(err => {
          console.log('失败了');
        })
      },
      /**
       * 关闭抽奖弹框
       */
      close() {
        this.isShow = false;
        // location.reload();
      },
    },
    mounted() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 5;
      // 抽奖列表
      this.getPrizeList();
      getTurntableLog().then(res => {
        this.jluList = res.data.list
      })
    },
  }
</script>

<style lang="less">
  .award {
    position: relative;
    width: 100%;
    height: 1846rpx;
    background-image: url('../../../static/award/banner.png');
    background-size: 100%;
    overflow: hidden;

    .award_box {
      position: relative;
      margin: 62rpx auto;
      width: 710rpx;
      height: 1504rpx;
      background-image: url('../../../static/award/box.png');
      background-size: 100%;

      .jilu_box {
        position: absolute;
        top: 765rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 710rpx;
        height: 600rpx;
        text-align: center;
        overflow: auto;
      }

      .award_box_top {
        position: absolute;
        top: 165rpx;
        left: 50%;
        transform: translateX(-50%);
        background-image: url('../../../static/award/heng.png');
        background-repeat: no-repeat;
        background-size: 100% 4rpx;
        background-position: 50% 50%;
        width: 441rpx;
        height: 30rpx;

        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        text-align: center;
        color: #9E7744;
      }

      .award_content {
        position: absolute;
        top: 200rpx;
        left: 50%;
        transform: translateX(-50%);
        // width: 441rpx;
        // height: 490rpx;
        width: 500rpx;
        height: 500rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .text{
          line-height: 150rpx;
          font-size: 25rpx;
          overflow: hidden;
          white-space: nowrap;//内容超出不换行
          text-overflow: ellipsis;
          text-align: center;
        }

        .btn_text {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 150rpx;
        }

        .box {
          position: relative;
          margin-bottom: 20rpx;
          width: 150rpx;
          height: 150rpx;
          background-color: #fff;
          border-radius: 10rpx;
          border: 2rpx solid #fff;

          image {
            position: absolute;
            top: 0;
            left: 0;
            width: 150rpx;
            height: 150rpx;
          }
        }

        .box2 {
          position: relative;
          margin-bottom: 20rpx;
          width: 150rpx;
          height: 150rpx;
          background-color: rgb(253, 250, 157);
          border-radius: 10rpx;
          border: 2rpx solid rgb(253, 201, 110);

          image {
            position: absolute;
            top: 0;
            left: 0;
            width: 150rpx;
            height: 150rpx;
          }
        }
      }
    }

    .title_icon {
      position: relative;
      margin: 148rpx auto 0;
      width: 647rpx;
      height: 112rpx;

      .span {
        position: absolute;
        top: 10rpx;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 60rpx;
        color: #FFD76B;
        font-weight: bold;
      }

      image {
        position: absolute;
        top: 0;
        left: 0;
        width: 647rpx;
        height: 112rpx;
      }
    }
  }
</style>
